<template>
  <div>
    <van-nav-bar style="background-color: #d03a2c" @click-left="esc">
      <template #left>
        <van-icon name="arrow-left" color="#fff" />
      </template>
      <template #title>
        <span style="color: white">签到</span>
      </template>
      <template #right>
        <van-icon name="ellipsis" color="#fff" />
      </template>
    </van-nav-bar>
    <div class="heads">
      <div class="head1">
        <span>我的积分</span>
        <br />
        <span>{{ num }}</span>
      </div>
      <div class="head2">
        <van-button block class="bud" @click="qian">
          <span v-show="isbools">签到</span>
          <span v-show="!isbools">今日已签到</span>
        </van-button>
      </div>
      <div class="head3">
        <span>连续签到</span>
        <br />
        <span>{{ date }}天</span>
      </div>
    </div>
    <van-calendar
      type="multiple"
      @confirm="onConfirm"
      title="日历"
      :poppable="false"
      :show-confirm="false"
      :style="{ height: '500px' }"
    />
    <!-- :default-date="valuedate" -->
  </div>
</template>

<script>
export default {
  data() {
    return {
      isbools: true,
      num: 0,
      valuedate: [],
      date: 0
    };
  },
  methods: {
    esc() {
      history.back();
    },
    // 签到
    qian() {
      if (!this.isbools) return this.$dialog.alert({
        message: '你今天已经签过到了',
      })
      this.isbools = false;
      this.Sto.Session.set("bools", 1)
      // this.num++;
      this.$post(this.url2 + '/jifen/updateIntegral', {
        userId: parseInt(this.$store.state.user.id)
      }).then(res => {
        console.log(res)
        if (res.errorCode == '0') {
          this.$notify({ type: "success", message: "签到成功" })
          this.get();
        }
      })
    },
    // 查询用户签到的积分
    get() {
      this.$post(this.url2 + "/jifen/signIntegral", {
        userId: this.$store.state.user.id
      }).then(res => {
        console.log(res);
        if (res.errorCode == '0') {
          this.num = res.data.count;
          this.date = res.data.continueSign
          // let date = res.data.updateTime.getDate()
          // let date1 = new Date(res.data.updateTime);
          // let date2 = new Date(res.data.createTime)
          // //console.log("day1:" + day1);
          // //console.log("day2:" + day2);
          // console.log(date1.toString());
          // var differDay = Math.abs(date1 - date2) / 1000 / 60 / 60 / 24;
          // // this.valuedate.push(new Date(res.data.updateTime))
          // console.log(differDay.toString());
        }
      })
    },
    // 日期
    onConfirm(value) {
      console.log(value);
    }
  },
  created() {

    if (this.Sto.Session.get("bools") == 1) {
      this.isbools = false;
    }
    this.get()
  },
};
</script>

<style  scoped>
.heads {
  height: 25vh;
  background-color: #c9372a;
  position: relative;
}
.head1 {
  height: 40px;
  width: 60px;
  background-color: #d43a2e;
  position: absolute;
  left: 5px;
  top: 40%;
  font-size: 12px;
  color: white;
  text-align: center;
}
.head3 {
  height: 40px;
  width: 60px;
  color: white;
  background-color: #a4261d;
  position: absolute;
  right: 5px;
  top: 40%;
  text-align: center;
  font-size: 12px;
}
.head2 {
  position: absolute;
  top: 25%;
  left: 40vw;
  z-index: 99;
}
.bud {
  height: 80px;
  width: 80px;
  border-radius: 40px;
  background-color: #fff;
  text-align: center;
}
</style>